<template>
  <div class="home">
    <el-container>
      <!-- 菜单栏 -->
      <el-aside v-if="showMenu" :width="isCollapse ? '65px' : '240px'">
        <t-aside />
      </el-aside>
      <el-container>
        <!-- 主体内容 -->
        <el-main>
          <!-- 头部 -->
          <el-header v-if="showMenu" class="out-header">
            <t-header />
          </el-header>

          <!-- 标签页 -->
          <t-tag-navigation @reload="reloadPage" />

          <t-content
            v-loading="pageLoading"
            element-loading-text=" "
            element-loading-spinner=" "
            element-loading-background="rgba(255, 255, 255, 0.6)"
          >
            <keep-alive v-if="isRouterAlive">
              <router-view v-if="$route.meta.keepAlive && isRouterAlive">
              </router-view>
            </keep-alive>
            <router-view v-if="!$route.meta.keepAlive && isRouterAlive">
            </router-view>
          </t-content>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import tAside from "@/layout/t-aside";
import tHeader from "@/layout/t-header";
import tTagNavigation from "@/layout/t-tag-navigation";
import tContent from "@/layout/t-content";
export default {
  components: {
    tHeader,
    tContent,
    tTagNavigation,
    tAside,
  },
  name: "home",
  data() {
    return {
      isRouterAlive: true,
      keepLiveIncludes: [],
    };
  },
  computed: {
    isCollapse() {
      return this.$store.state.admin.isCollapse;
    },
    showMenu() {
      return this.$store.state.admin.showMenu;
    },
    pageLoading() {
      return  this.$store.state.user.pageLoading;
    },
  },
  provide() {
    return {
      reload: this.reloadPage,
    };
  },
  methods: {
    reloadPage() {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      });
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.home {
  min-width: 1200px;
}
.el-main {
  background: $bg-color;
  padding: 0;
   height: 100vh;
  overflow: auto;
}
.el-aside {
  height: $aside-height;
  overflow-x: hidden;
  background: $aside-bg;
  transition: 0.3s;
}
.el-header {
  padding: 0;
}
.out-header {
  position: sticky;
  top: 0;
  height: $header-height !important;
  z-index: 99;
  background: $header-bg;
  border-bottom: 1px #eee solid;
}
</style>